<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            display: block;
            background-color: black;
        }

        body {
            margin: 0px;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        var canvas = document.querySelector('canvas')
        var ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        function randomColor() {
            var red = Math.floor(Math.random() * 255)
            var blue = Math.floor(Math.random() * 255)
            var green = Math.floor(Math.random() * 255)
            return 'rgb(' + red + ',' + green + ',' + blue + ')'
        }

        function Circle(x, y) {
            this.x = x
            this.y = y
            this.r = Math.random() * 7 + 8 //8-15
            this.rChange = 0.96
            this.xChange = Math.random() > 0.5 ? Math.random() * 4 : -(Math.random() * 4)
            this.yChange = Math.random() > 0.5 ? Math.random() * 4 : -(Math.random() * 4)
            this.color = randomColor()
        }
        var arr = []
        document.body.addEventListener('click', function (e) {
            for (var i = 0; i < 100; i++) {
                arr.push(new Circle(e.clientX, e.clientY))
            }
        })

        //定时器
        setInterval(function () {
            ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)  //x y width height
            arr.forEach(function (item, index) {
                ctx.beginPath() //落笔
                ctx.arc(item.x, item.y, item.r, 0, Math.PI * 2)  //x y 半径 起始角度 终止角度
                ctx.fillStyle = item.color
                ctx.fill()
                ctx.closePath() //提笔
                item.x += item.xChange;
                item.y += item.yChange;
                item.r *= item.rChange
            })
        }, 1000 / 60)

        //每隔1s钟->遍历10个对象->每一个对象进行绘画->每一个对象又进行了x y的更改

        // var num = 15
        // setInterval(function () {
        //     num *= 0.9
        //     console.log(num)
        // }, 1000)

    </script>
</body>

</html>